<template>
  <div class="app-container order-list-index" style="padding-top: 0">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('fiance.receivable')" name="1"></el-tab-pane>
      <el-tab-pane :label="$t('fiance.copeWith')" name="2"></el-tab-pane>
    </el-tabs>
    <!-- 查询条件。 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px" size="small" label-position="left" class="ry_form">
      <el-form-item :label="$t('fiance.paymentDate')" prop="createTime">
        <!-- <el-date-picker clearable size="small" v-model="queryParams.createTime" type="date"
          placeholder="选择出账日期"> -->
          <el-date-picker
            v-model="statementDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            :start-placeholder="$t('common.beginTime')"
            :end-placeholder="$t('common.deadline')"
            :picker-options="pickerOptions">
          </el-date-picker>
        <!-- </el-date-picker> -->
      </el-form-item>
      <el-form-item :label="$t('common.odd')" prop="financeNo">
        <el-input v-model="queryParams.financeNo"></el-input>
      </el-form-item>
      <el-form-item :label="$t('common.type')" prop="serviceTypeName">
        <el-input v-model="queryParams.serviceTypeName"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fiance.payee')" prop="payeeName">
        <el-input v-model="queryParams.payeeName"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fiance.drawee')" prop="payerName">
        <el-input v-model="queryParams.payerName"></el-input>
      </el-form-item>
      <el-form-item class="flex_one tr">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >{{ $t('common.search') }}</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >{{ $t('common.reset') }}</el-button
        >
      </el-form-item>
    </el-form>
    <div v-loading="loading">
      <div class="tableTooltip">
        {{ $t('common.user') }}：{{ ruleForm.customerName }} {{ $t('fiance.total') }}：{{ totalAmount }}
      </div>
      <TableComponents
        ref="tableRef"
        :url="'/wms/bmsFinance/financeDetail'"
        :req="{ page: 0, size: 10 }"
        :methodType="'paramsPost'"
        :params="{ ...params, ...queryParams }"
        :columns="columnsAry"
        :return-data="returnData"
        @jumpDetails="jumpClick"
      >
      <el-table-column v-if="activeName === '2'" slot="operation" :label="$t('common.operation')">
        <template slot-scope="scope">
          <el-button type="text" @click="exportRow(scope.row, true)">{{ $t('common.export') }}</el-button>
        </template>
      </el-table-column>
      </TableComponents>
      <bill-print :row="RowList ? RowList : ''" ref="printRef"></bill-print>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  FreightForwarderPayable,
  CustomerAccountsReceivable,
} from "@/views/financial/const/index.js";
import FormComponents from "@/components/FormComponents/index.vue";
import TableComponents from "@/components/Table/list.vue";
import TabFilter from "@/components/Tab/tabFilter.vue";
import Tab from "@/components/Tab/detailTab.vue";
import mixTime from '@/views/financial/bill/mixTime.js'
import BillPrint from "./billPrint.vue";

export default {
  name: "receivables",
  components: {
    FormComponents,
    TableComponents,
    TabFilter,
    Tab,
    BillPrint
  },
  mixins: [mixTime],
  data() {
    return {
      ruleForm: {},
      loading: false,
      activeName: "1",
      FreightForwarderPayable,
      statementDate: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        endTime: null,
        startTime: null,
        payeeName: null,
        payerName: null,
        financeNo: null,
        serviceTypeName: null,
      },
      tabs: [
        { name: this.$t('fiance.receivable'), value: "1" },
        { name: this.$t('fiance.copeWith'), value: "2" },
      ],
      // columnsAry: [
      //   { prop: "financeNo", label: this.$t('fiance.No'), width: "100px" },
      //   { prop: "feeName", label: this.$t('fiance.feeName'), width: "100px" },
      //   { prop: "amount", label: this.$t('fiance.amount'), width: "100px" },
      //   { prop: "payeeName", label: this.$t('fiance.payeeName'), width: "100px" },
      //   { prop: "payerName", label: this.$t('fiance.payerName'), width: "100px" },
      //   { prop: "feeCodeName", label: this.$t('fiance.serviceFeeCode'), width: "100px" },
      //   { slot: 'operation', prop: "operation", label: this.$t('common.operation'), width: "100px" },
      // ],
      rules: {},
      totalMoneyYuan: "",
      params: {},
      totalAmount: 0,
      DataTransmitted: {},
      RowList: []
    };
  },
  computed: {
    // totalAmount() {
    //   // const totalAmount = this.$refs.tableRef.tableData.reduce((sum, r) => sum + r.amount, 0); 
    //   // return totalAmount
    // }
    columnsAry() {
      const base = [
        { prop: "financeNo", label: this.$t('fiance.No'), width: "130px" },
        { prop: "title", label: this.$t('fiance.feeName'), width: "100px" },
        { prop: "amount", label: this.$t('fiance.amount'), width: "100px" },
        { prop: "payeeName", label: this.$t('fiance.payeeName'), width: "100px" },
        { prop: "payerName", label: this.$t('fiance.payerName'), width: "100px" },
        { prop: "serviceTypeName", label: this.$t('fiance.serviceFeeCode'), width: "100px" },
        { prop: "createTime", label: this.$t('common.createTime'), width: "150px" },
        { slot: 'operation', prop: "operation", label: this.$t('common.operation') },
      ]
      const boxInfo = [
        { prop: "fromNo", label: this.$t('common.shipping mark'), width: "100px" },
      ]
      if (this.DataTransmitted.serviceType === 'STOCK_AGE') {
        return [...boxInfo, ...base]
      } else {
        return [...base]
      }
    }
  },
  methods: {
    open(row) {
      this.DataTransmitted = row
      this.params.customerId = row.customerId;
      // this.params.userId = this.$store.state.user.userId
      this.params.type = this.activeName;
      if (row.serviceType !== 'ORDER') {
        this.params.mainId = row.mainId
      } else {
        this.params.orderId = row.orderId
      }
      this.ruleForm = row;
      this.$refs.tableRef.setParams(this.params);
      this.getList();
    },
    handleClick(tab, event) {
      this.activeName = String(Number(tab.index) + 1);
      this.params.type = String(Number(tab.index) + 1);
      this.$refs.tableRef.setParams(this.params);
      this.getList();
    },
    handleSeacrh(v) {
      this.filterParams = {
        ...v.filterForm,
        ...v.filterParam,
      };
      this.$refs.tableRef.handleSearchParams(this.filterParams);
    },
    getList() {
      this.$nextTick(() => {
        this.$refs.tableRef.getList();
      });
    },
    // 应付账单打印
    exportRow(row, print) {
      this.windowPrintOut(row, print);
    },
    windowPrintOut(row, print) {
      this.RowList = row
      this.$nextTick(() => {
        this.$refs["printRef"].start();
      });
    },
    jumpClick(v) {
      // console.log('v', v)
    },
    returnData(data) {
      const totalAmount = data.content.length > 0 ? data.content[0].allAmount || data.content.reduce((sum, r) => sum + r.amount, 0) : null 
      this.totalAmount = totalAmount; 
      return data.content.map((r) => {
        r.createTime = dayjs(r.createTime).format("YYYY-MM-DD HH:mm:ss");
        r.feeCodeName = (
          CustomerAccountsReceivable.find((t) => t.value === r.feeCode) || {}
        ).label;
        return r;
      });
    },
    toDetail(row) {},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startTime = this.statementDate[0]
      this.queryParams.endTime = this.statementDate[1]
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
      this.statementDate = ''
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.tableTooltip {
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  background: #f5f7fa;
  padding: 12px;
  color: #606266;
}
::v-deep {
  .el-drawer__header {
    font-size: 18px
  }
}
</style>
